<style type="text/css">
    #hr-outsideTeacher-update {
        pupdateing: 20px 25px 25px 0;
    }
</style>

<!-- 注意id属性每个页面id必须独立-->
<div class="layui-fluid" id="hr-outsideTeacher-update">
    <!-- 注意lay-filter属性，该属性为form表单唯一属性-->
    <form class="layui-form" action="" lay-filter="hr-outsideTeacher-update-form">
        <div class="layui-form-item febs-hide">
            <label class="layui-form-label febs-form-item-require">ID：</label>
            <div class="layui-input-block">
                <input type="text" name="id" autocomplete="off" class="layui-input"
                       data-th-value="${outsideTeacher.id}" disabled style="background:#CCCCCC">
            </div>
        </div>
    <!--layui-form-item为自适应长度样式-->
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">真实姓名</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <!-- minlength为最小长度、 maxlength为最大长度-->
                <!-- autocomplete默认填写off,此项为配置使用缓存读取历史记录-->
                <!-- lay-verify为表单验证属性：required：必填项、range于minlength，maxlength公用， character不能输入特殊字符-->
                <!-- 详细表单验证请参考：resources\static\febs\lay\modules\validate.js-->
                <input type="text" name="realName" minlength="2" maxlength="20" data-th-value="${outsideTeacher.realName}"
                       lay-verify="range|name|chinese" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <!-- 表单页左侧label -->
            <label class="layui-form-label febs-form-item-require">性别</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <input type="radio" name="sex" value="4000" title="男" checked="">
                <input type="radio" name="sex" value="4001" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <!-- 表单页左侧label -->
            <label class="layui-form-label febs-form-item-require">常用手机</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <!-- minlength为最小长度、 maxlength为最大长度-->
                <!-- autocomplete默认填写off,此项为配置使用缓存读取历史记录-->
                <!-- lay-verify为表单验证属性：required：必填项、range于minlength，maxlength公用， character不能输入特殊字符-->
                <!-- 详细表单验证请参考：resources\static\febs\lay\modules\validate.js-->
                <input type="text" name="phone" minlength="2" maxlength="20" lay-verify="phone"
                       autocomplete="off" class="layui-input repetitive" id="hr-outsideTeacher-update-phone">
            </div>
        </div>

        <div class="layui-form-item">
            <!-- 表单页左侧label -->
            <label class="layui-form-label febs-form-item-require">备用手机</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <!-- minlength为最小长度、 maxlength为最大长度-->
                <!-- autocomplete默认填写off,此项为配置使用缓存读取历史记录-->
                <!-- lay-verify为表单验证属性：required：必填项、range于minlength，maxlength公用， character不能输入特殊字符-->
                <!-- 详细表单验证请参考：resources\static\febs\lay\modules\validate.js-->
                <input type="text" name="backPhone" minlength="2" maxlength="20" lay-verify="phone"
                       autocomplete="off" class="layui-input repetitive" id="hr-outsideTeacher-update-backPhone">
            </div>
        </div>

        <div class="layui-form-item">
            <!-- 表单页左侧label -->
            <label class="layui-form-label febs-form-item-require">邮箱</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <!-- minlength为最小长度、 maxlength为最大长度-->
                <!-- autocomplete默认填写off,此项为配置使用缓存读取历史记录-->
                <!-- lay-verify为表单验证属性：required：必填项、range于minlength，maxlength公用， character不能输入特殊字符-->
                <!-- 详细表单验证请参考：resources\static\febs\lay\modules\validate.js-->
                <input type="text" name="mail" minlength="2" maxlength="20" lay-verify="char|required|range|name|character|chinese"
                       autocomplete="off" class="layui-input repetitive" id="hr-outsideTeacher-update-mail">
            </div>
        </div>

        <div class="layui-form-item">
            <!-- 表单页左侧label -->
            <label class="layui-form-label febs-form-item-require">微信号</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <input type="text" name="wxid" minlength="2" maxlength="20" lay-verify="char|required|range|name|character|chinese"
                       autocomplete="off" class="layui-input repetitive" id="hr-outsideTeacher-update-wxid">
            </div>
        </div>

        <div class="layui-form-item">
            <!-- 表单页左侧label -->
            <label class="layui-form-label febs-form-item-require">银行账户名</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <input type="text" name="bankRealName" minlength="2" maxlength="20" lay-verify="char|required|range|name|character|chinese"
                       autocomplete="off" class="layui-input repetitive" id="hr-outsideTeacher-update-bankRealName">
            </div>
        </div>

        <div class="layui-form-item">
            <!-- 表单页左侧label -->
            <label class="layui-form-label febs-form-item-require">开户行</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <input type="text" name="bankName" minlength="2" maxlength="20" lay-verify="char|required|range|name|character|chinese"
                       autocomplete="off" class="layui-input repetitive" id="hr-outsideTeacher-update-bankName">
            </div>
        </div>

        <div class="layui-form-item">
            <!-- 表单页左侧label -->
            <label class="layui-form-label febs-form-item-require">开户地址</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <input type="text" name="bankAdd" minlength="2" maxlength="20" lay-verify="char|required|range|name|character|chinese"
                       autocomplete="off" class="layui-input repetitive" id="hr-outsideTeacher-update-bankAdd">
            </div>
        </div>

        <div class="layui-form-item">
            <!-- 表单页左侧label -->
            <label class="layui-form-label febs-form-item-require">银行卡卡号</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <input type="text" name="bankCardId" minlength="2" maxlength="20" lay-verify="char|required|range|name|character|chinese"
                       autocomplete="off" class="layui-input repetitive" id="hr-outsideTeacher-update-bankCardId">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label" >银行卡图片</label>
            <div id="outsideTeacherBankPic">
            </div>
            <div class="layui-upload">
                <div>
                    <a style="position:relative;top:10px" onclick="getElementById('outsideTeacher-update-img1').click()">重新上传图片</a>
                    <span style="ping-left: 110px;position:relative;top:10px;color: #e00000">（上传的图片尺寸应小于750*560）</span>
                    <div></div>
                    <img class="layui-upload-img"  id="outsideTeacher-update-img1"  src="" width="35%" style="position:relative;top:12px" hidden="true">
                    <input type="hidden" id="bankPic" name="bankPic">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="position:relative;top:12px">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" maxlength="200" class="layui-textarea" style="position:relative;top:12px"></textarea>
            </div>
        </div>
        <div class="layui-form-item febs-hide">
            <button class="layui-btn" lay-submit="" lay-filter="outsideTeacher-update-form-submit"
                    id="hr-outsideTeacher-update-submit-btn"></button>
        </div>
    </form>
</div>

<script data-th-inline="javascript">
    layui.use(['febs', 'form', 'validate','upload'], function () {
        let $ = layui.$,
            febs = layui.febs,
            layer = layui.layer,
            upload = layui.upload,
            form = layui.form,
            // 获得后台出入的实体对象
            outsideTeacher = [[${outsideTeacher}]],
            // 验证
            validate = layui.validate;
        // 表单验证
        form.verify(validate);
        // 表单渲染
        form.render();

        // 初始化页面数据
        initoutsideTeacherValue();
        // 初始化页面数据
        function initoutsideTeacherValue() {
            form.val("hr-outsideTeacher-update-form", {
                "realName": outsideTeacher.realName,
                "sex": outsideTeacher.sex,
                "phone": outsideTeacher.phone,
                "backPhone": outsideTeacher.backPhone,
                "mail": outsideTeacher.mail,
                "wxid": outsideTeacher.wxid,
                "bankRealName": outsideTeacher.bankRealName,
                "bankName": outsideTeacher.bankName,
                "bankAdd": outsideTeacher.bankAdd,
                "bankCardId": outsideTeacher.bankCardId,
                "bankPic": outsideTeacher.bankPic,
                "remark": outsideTeacher.remark
            });
            $("#outsideTeacher-update-img1").attr('src', outsideTeacher.bankPic);
        }
        // 图片上传
        const uploadInst = upload.render({
            elem: '#outsideTeacher-update-img1'
            , url: ctx + 'upload' //改成您自己的上传接口
            , method: 'post'
            , auto: false
            , accept: 'images'
            , exts: 'jpg|png|gif|bmp|jpeg'
            , choose: function (obj) {
                //预读本地文件示例，不支持ie8
                let flag = true;
                obj.preview(function (index, file, result) {
                    const img = new Image();
                    img.src = result;
                    img.onload = function () { //初始化夹在完成后获取上传图片宽高，判断限制上传图片的大小。
                        if (img.width <= 750 && img.height <= 560) {
                            $('#outsideTeacher-update-img1').attr('src', result); //图片链接（base64）
                            obj.upload(index, file); //满足条件调用上传方法
                        } else {
                            flag = false;
                            layer.msg("您上传的图片尺寸必须小于750*560尺寸！");
                            return false;
                        }
                    }
                    console.log(img);
                    return flag;
                });
            }
            , done: function (res) {
                // 上传成功
                if (res.code === 200) {
                    layer.msg('上传图片成功');
                    $("#bankPic").val(res.url);
                }
            }
            , error: function () {
                // 示失败状态，并实现重传
                const demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
        // 表单提交事件
        form.on('submit(outsideTeacher-update-form-submit)', function (data) {
             console.log("进入修改" + data.field)
            // 如果都没有修改直接返回
            if (febs.nativeEqual(data.field, outsideTeacher)) {
                febs.alert.warn('数据未作任何修改！');
                return false;
            // 如果只修改了名字之外的东西，则直接更新
            }else if(febs.nativeEqual(data.field.realName, outsideTeacher.realName)){
                febs.post(ctx + 'outsideTeacher/update', data.field, function () {
                    layer.closeAll();
                    febs.alert.success('外部讲师信息修改成功');
                    // 点击父页面查询按钮
                    $('#hr-outsideTeacher').find('#hr-outsideTeacher-query-btn').click();
                });
            // 如果名字发生变化先进行判断是否重名，如果重名则返回，不重名则修改
            }else {
                let realName = data.field.realName;
                if(febs.nativeEqual(data.field.realName, outsideTeacher.realName)){
                    realName = null;
                }
                $.ajax({
                    type: 'get',
                    url: 'outsideTeacher/isRepetitive',
                    data: {"realName": realName},
                    success:function(res){
                        if(res){
                            febs.post(ctx + 'outsideTeacher/update', data.field, function () {
                                layer.closeAll();
                                febs.alert.success('员工标签修改成功');
                                $('#hr-outsideTeacher').find('#hr-outsideTeacher-query-btn').click();
                            });
                        }else{
                            febs.alert.error('输入的标签名字重复');
                        }
                    }
                });
            }
            return false;
        });
    });
</script>